<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>测试本地缓存js和css文件</title>
        <style id="css_1" data-src="demo1.css" version="1">
            
        </style>
        <script type="text/javascript" data-src="demo1.js" id="js_1" version="3"></script>        
        <script type="text/javascript">
            function GetItem(key){
                try{
                    return localStorage.getItem(key);    
                }catch(err){
                    console.log(err,"color:red;");
                }                
            }
            function SetItem(key,val){
                try{
                    localStorage.setItem(key,val);
                }catch(err){
                    console.log(err,"color:red;");
                }
            }
            function GetV(id){
                var v = GetItem("rsv");
                if(v==null){
                    return null;
                }
                var vals = v.split(";");
                for(var i=0;i<vals.length;i++){
                    var c = vals[i].trim();
                    var kv = c.split("=");
                    if(kv.length == 2){
                        if(kv[0] == id){
                            return kv[1];
                        }
                    }
                }
                return null;
            }
            function SetV(id,val){
                var v = GetItem("rsv");
                if(v==null){
                    v = id+"="+val+";";                     
                }else{
                    var pt = new RegExp(id+"=[^;]*;");
                    if(pt.test(v)){
                        v = v.replace(pt,id+"="+val+";");
                    }else{
                        v = v + id+"="+val+";"; 
                    }
                }
                SetItem("rsv",v);
            }
            function get(url, callback){
                var xmlHttpReg = null;
                if (window.ActiveXObject) {//如果是IE 
                    xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");     
                } else if (window.XMLHttpRequest) { 
                    xmlHttpReg = new XMLHttpRequest(); //实例化一个xmlHttpReg
                }

                //如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
                if (xmlHttpReg != null) {
                    xmlHttpReg.open("get", url, true);1
                    xmlHttpReg.send(null);
                    xmlHttpReg.onreadystatechange = function(){
                        if (xmlHttpReg.readyState == 4) {//4代表执行完成             
                            if (xmlHttpReg.status == 200) {//200代表执行成功
                            //将xmlHttpReg.responseText的值赋给ID为resText的元素
                                callback(xmlHttpReg.responseText);                  
                            }
                        }
                    }; //设置回调函数
                }
            }
            
            function getRs(id){
                var doc = document.getElementById(id);
                var src = doc.attributes["data-src"].value;
                var ver = doc.attributes["version"].value;
                var v = GetV(id);
                if(v==ver){
                    doc.innerHTML = GetItem(id);   
                }else{
                    get(src,function(data){
                        doc.innerHTML=data;
                        SetItem(id,data);   
                        SetV(id,ver);                     
                    })
                }
            }
            getRs("css_1");
            getRs("js_1");
        </script>
    </head>
    <body>

    </body>
</html>